<template>
  <div class="topnav_box">
        <div class="topnav_tit">商城后台管理系统</div>
        <div class="nav_right">
          <img :src="userimg">
          <div class="name">{{username}}</div>
          <div class="nav_tuichu" @click="tuichufn">退出</div>
        </div>
      </div>
</template>

<script>
    export default {
      components: {},
      data() {
          return {
            userimg:localStorage.getItem('headimg'),
            username:localStorage.getItem('username'),
          }
      },
      methods:{
        tuichufn(){
          let _this = this
          this.$confirm('确定退出登录?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            _this.$router.push({path:'/login'})
          })
            .catch(()=>{});
        },
      },
      created() {

      },
    }
</script>

<style scoped lang="less">
  .topnav_box{
    width: 100%;
    height: 71px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e4e4e4;
    background-color: white;
    padding: 0 50px;
    box-sizing: border-box;
    min-width: 1150px;
    .topnav_tit{
      height: 71px;
      line-height: 71px;
      font-weight: 600;
      font-size: 18px;
    }
    .nav_right{
      height: 71px;
      line-height: 71px;
      display: flex;
      img{
        display: inline-block;
        width: 40px;
        height: 40px;
        margin-top: 14px;
        border-radius: 20px;
        margin-right: 10px;
      }
      .name{
        color: #2e8ded;
        margin-right: 10px;
      }
      .nav_tuichu{
        cursor: pointer;
      }
    }
  }
</style>
